<template>
    <div id="app">
        <router-view class="page" :transition="direction">
        </router-view>
    </div>
</template>

<script type="text/ecmascript-6">
    import store from './datas/store';

    export default {
        store,
        data() {
            return {
                direction: 'forward'
            }
        },
        ready() {
            this.$router.records = [];

            this.$router.forward = path => {
                var state = this.$router.stringifyPath(this.$route);
                this.$router.records.push(state);

                this.$router.go(path);
            };

            this.$router.back = path => {
                var state = this.$router.stringifyPath(path);
                var index = this.$router.records.length - 1;
                var last = this.$router.records[index];

                if (last && last === state) {
                    history.back();
                    this.$router.records.pop();
                } else {
                    this.$router.replace(path);
                }
            };

            this.$router.beforeEach(t => {
                var fd = t.from.depth || 0;
                var td = t.to.depth || 0;

                if (fd === -1 || td === -1) {
                    this.$root.$data.direction = 'forward';
                } else if (!t.from.path || fd === td) {
                    this.$root.$data.direction = 'null';
                } else if (fd < td) {
                    this.$root.$data.direction = 'forward';
                } else if (fd > td) {
                    this.$root.$data.direction = 'back';
                }

                this.$nextTick(() => t.next());
            });
        }
    }
</script>

<style rel="stylesheet/less" lang="less">
    @import "assets/less/enter";
</style>